<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        #formDiv{
            width: 400px;
            height: 240px;
            border: 1px solid #000;
            margin:170px 0 0 430px;

        }
        #userDiv{
            margin: 20px 0 0 70px;
        }
        #pwdDiv{
            margin: 10px 0 0 69px;
        }
        #re_pwdDiv{
            margin: 10px 0 0 65px;
        }
        #tel_Div{
            margin: 10px 0 0 69px;
        }
        #reg_div{
            margin: 10px 0 0 180px;
        }
    </style>
    <!--导入jquery的js库-->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){

            //获取id="tip"的span标签对象
            var span  = $("#tip") ;

            //alert("页面载入事件触发了") ;
            //当用户输入用户名之后,失去焦点事件触发
            $("#username").blur(function(){
                //alert("失去焦点事件触发了") ;
                //获取用户名
               // alert($(this).val()) ;
               var username =  $("#username").val() ;
               //alert(username) ;
                //发送ajax请求
                $.ajax({
                    // 此时:浏览器创建代理对象 xmlHtptRequest
                    //请求后台地址
                    url:"/Mybatis_Servlet_project_war/check",
                    //发送的数据,支持Json
                    data: {"username":username},
                    //提交方式
                    type: "post",
                    //响应成功的回调函数
                    success: function(data){ //data:服务器响应过来成功的数据
                        if(data.code==1){
                            //给span标签对象设置成功标识
                            span.html(data.msg) ; //设置文本
                            span.css("color","green") ;
                        }else{
                            //给span标签对象设置成功标识
                            span.html("<strong>"+data.msg+"</strong>") ; //设置文本
                            span.css("color","red") ;
                        }
                    },
                    dataType: "json" //服务器想响应过来的数据格式
                })
            }) ;
        }) ;

    </script>
</head>
<body>
<div id="formDiv">
    <form>

        <div id="userDiv">
            用户名&ensp;&ensp;<input type="text" id="username"
                     name="userName"           placeholder="请您输入用户名" />
            <span id="tip"></span>
        </div>


        <div id="pwdDiv">
            出生日期<input type="date" name="" placeholder="请您输入出生日期" />
        </div>

        <div id="tel_Div">
            地址&ensp;&ensp;&ensp;&nbsp;&nbsp;<input type="text" placeholder="请您输入手地址码" />
        </div>
        <div id="reg_div">
            <input type="submit" value="注册" />
        </div>
    </form>
</div>

</body>
</html>